<template>
  <div class="person">
    <ul>
      <li v-for="item in list" :key="item.id">
        {{ item.name }}========={{ item.age }}
      </li>
    </ul>

  </div>
</template>

<script setup lang="ts" name="Person">
import {type Persons} from '@/types';
//接收父亲传来的
import { defineProps,withDefaults} from 'vue';
//不能打印
// const props = defineProps(['list'])

//接受并限制类型
// const props = defineProps<{list:Persons}>()

//接收 限制类型 指定默认值+限制必要性
let props = withDefaults(defineProps<{list?:Persons}>(),{
  list:()=>[{id:"iadiw1001",name:"猪猪侠",age:100}]
}
)
console.log(props)


</script>

<!-- scoped
      表示作用域只在本组件有用，
      不加的话 如果在父组件里有同名的类选择器，会渲染那个组件
-->
<style scoped>
.person {
  background-color: aqua;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}

button {
  margin: 0 5px;
}
</style>